<template>
  <swiper
    :options="swiperOptions" ref="mySwiper" class="gzl-swiper"
    data-swiper="travelChannel">
    <!-- slides -->
    <swiper-slide v-for="(item, index) in swiperList" :key="index"><img :src="item.picUrl" alt=""></swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
  name: 'swiperBanner',
  props: {
    swiperOptions: {
      type: Object,
      default () {
        return {
          loop: true,
          speed: 600,
          autoplay: {
            delay: 5000,
            disableOnInteraction: false
          },
          pagination: {
            el: '.swiper-pagination'
          }
        }
      }
    },
    swiperList: {
      type: Array,
      required: true
    }
  }
}
</script>
